import React, {Component} from 'react';
import {View, Text, Image, StyleSheet, ScrollView, ActivityIndicator, RefreshControl, FlatList} from 'react-native';
import {Flex, List, Toast, WhiteSpace, WingBlank} from '@ant-design/react-native';
import {ownerPaymentList} from '~/api/parking';
const Item = List.Item;
import moment from 'moment';
import {connect} from 'react-redux';
import {getShareNewsList} from '~/api/share';
import store from '~/store';
const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
    };
};
let pagecount = 0;
let index = 1;
let size = 10;
const getter = store.getState();
class paymentRecord extends Component {
    // static navigationOptions = {
    //     title: getter.userinfo.identity === 8 ? '支付记录' : '收款记录',
    // };
    static navigationOptions = ({navigation}) => {
        let title = '';
        if (navigation.state.params) {
            title = navigation.state.params.title;
        }
        return {title};
    };
    constructor(props) {
        super(props);
        this.state = {
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            list: [],
        };
        let title = '';
        switch (this.props.userinfo.identity) {
            case 8:
                title = '支付记录';
                break;
            case 11:
                title = '收款记录';
                break;
        }
        this.props.navigation.setParams({title});
        this.getpaylist();
    }
    getpaylist() {
        ownerPaymentList({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
        }).then((r) => {
            console.log(r.data.list);
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            } else {
                Toast.info(r.msg, 1);
            }
        });
    }
    _onRefresh() {
        this.setState({footer: 0, page_index: index, page_size: size}, () => {
            this.getpaylist();
        });
    }
    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    ownerPaymentList({
                        page_index: this.state.page_index,
                        page_size: this.state.page_size,
                    }).then((r) => {
                        // console.log(r.data.list);
                        if (r.code === 0) {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            if (r.code === 0) {
                                this.setState({
                                    list: dataArray,
                                    isLoading: false,
                                });
                            } else {
                                Toast.info(r.msg, 1);
                            }
                        } else {
                            Toast.info(r.msg, 1);
                        }
                    });
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <List style={{marginTop: 10}}>
                <Item>
                    <Flex
                        onPress={() => {
                            this.props.navigation.push('PaymentDetailed', {
                                order_id: item.ParkingOrderID,
                            });
                        }}
                        direction={'column'}
                        align={'start'}
                        style={{
                            padding: 10,
                            width: '100%',
                            backgroundColor: 'white',
                            marginTop: 10,
                            borderRadius: 10,
                        }}>
                        <Flex style={{width: '100%'}} justify={'between'}>
                            <Text style={{fontSize: 16, fontWeight: 'bold'}}>认购车位定金</Text>
                            <Text style={{fontSize: 16}}>
                                <Text style={{fontSize: 20, color: '#EC4F46'}}>￥{item.PaySum}</Text>
                            </Text>
                        </Flex>
                        {/* <Flex justify={'between'} style={{ width: '100%' }}>
                                        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>活动：51大促活动</Text>
                                    </Flex> */}
                        <Flex style={{width: '100%'}}>
                            <Text style={{fontSize: 14, color: '#999999'}}>购买{item.BuildingName}</Text>
                            {/* <Text style={{ fontSize: 14, color: '#999999' }}>负一楼</Text> */}
                            <Text style={{fontSize: 14, color: '#999999'}}>{item.ParkingName}车位的定金</Text>
                        </Flex>
                        {/* <Flex justify={'between'} style={{ width: '100%' }}>
                                        <Text style={{ fontSize: 14, color: '#999999' }}>地址：华帝领域华帝街13号</Text>
                                    </Flex>
                                    <Flex justify={'between'} style={{ width: '100%' }}>
                                        <Text style={{ fontSize: 14, color: '#999999' }}>建筑面积：32</Text>
                                        <Text style={{ fontSize: 14, color: '#999999' }}>使用面积：23</Text>
                                    </Flex> */}
                        <Flex justify={'between'} style={{width: '100%'}}>
                            {/* <Text style={{ fontSize: 14, color: '#999999' }}>支付方式：微信支付</Text> */}
                            <Text style={{fontSize: 14, color: '#999999'}}>{moment(item.RegDateTime).format('YYYY.MM.DD HH:mm')}</Text>
                        </Flex>
                    </Flex>
                </Item>
            </List>
        );
    }
    render() {
        return (
            <FlatList
                data={this.state.list}
                showsVerticalScrollIndicator={false}
                renderItem={(data) => this._renderItem(data.item)}
                keyExtractor={(item, index) => index}
                ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                onEndReached={() => {
                    this.loadData();
                }}
                onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                refreshing={true}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refreshing}
                        onRefresh={() => {
                            this._onRefresh();
                        }}
                    />
                }
            />
        );
    }
}

export default connect(mapGetter)(paymentRecord);

const styles = StyleSheet.create({});
